<template>
  <div class="list-table">
    <div class="dealTrack">
      <ul>
        <li v-for="info in trackSituationList" :key="info.id">
          <p class="time">{{ parseTime(info.happenTime) }}</p>
          <div class="content">
            <div class="main" @click="updateHandle(info)">
              <div class="top">
                <span class="nickName">{{ info.user.nickName }}</span>
                <span class="track">{{ trackModeFormat(info) }}</span>
                <span class="type">{{ itemTypeFormat(info) }}</span>
              </div>
              <div class="otherPeople"><span v-html="$t('对方人员')" />: <p>{{ info.otherPeople ? info.otherPeople : '-' }}</p></div>
              <div class="otherPeople"><span v-html="$t('详细情况')" />: <p>{{ info.details ? info.details : '-' }}</p></div>
              <div class="otherPeople"><span v-html="$t('下步计划')" />: <p>{{ info.nextStepPlan ? info.nextStepPlan : '-' }}</p></div>
              <div class="otherFile"><span v-html="$t('附件')" />:
                <template v-if="info.fileList.length>0">
                  <div class="file">
                    <p v-for="file in info.fileList" :key="file.id" class="click_file" @click.stop="preview(file.id)"> {{ file.name }} </p>
                  </div>
                </template>
                <templet v-else>-</templet>
              </div>
            </div>
            <div class="btn">
              <el-button
                v-hasPermi="['deal:track:edit']"
                size="small"
                type="text"
                icon="el-icon-edit"
                @click="updateHandle(info)"
              />
              <el-button
                v-hasPermi="['deal:track:remove']"
                size="small"
                type="text"
                icon="el-icon-delete"
                @click="deleteHandle(info)"
              />
            </div>
          </div>
        </li>
      </ul>
    </div>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改项目跟踪对话框 -->
    <el-dialog :title="$t(title)" :visible.sync="formOpen" :close-on-click-modal="false" :lock-scroll="false" custom-class="dialogForm" append-to-body>
      <dealTrackForm ref="dealTrackForm" :deal-id="queryParams.dealId" :is-deal="false" />
    </el-dialog>
    <OnlinePreview ref="OnlinePreview" :preview-tit="previewTit" />
  </div>
</template>

<script>
import { delDealTrack, listDealTrack } from '@/api/deal/track/dealTrack'
import dealTrackForm from './dealTrackForm.vue'
export default {
  components: {
    dealTrackForm
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      // 是否显示 在分析报表-项目跟踪页面 点击查看全部时会展示该页面 只展示table其它全部不显示
      isShow: true,
      // 是否显示弹出层
      formOpen: false,
      // 弹出层标题
      title: '项目跟踪',
      // 全部跟踪-表格数据
      trackSituationList: [],
      // 事项类型 字典item_type字典
      itemTypeOptions: [],
      // 跟踪方式 字典track_mode字典
      trackModeOptions: [],
      // 查询参数
      queryParams: {
        dealId: undefined,
        userId: undefined,
        startDate: undefined,
        endDate: undefined,
        pageNum: 1,
        pageSize: 10
      },
      menuKey: '',
      previewTit: ''
    }
  },
  watch: {
    '$route': {
      handler(val) {
        this.menuKey = val.query.menuKey
      },
      deep: true,
      immediate: true
    }
  },
  created() {
    this.getList()
    this.getDicts('item_type').then(response => {
      this.itemTypeOptions = response.data
    })
    this.getDicts('track_mode').then(response => {
      this.trackModeOptions = response.data
    })
  },
  methods: {
    // 查询通知列表
    getList() {
      this.loading = true
      listDealTrack(this.queryParams).then(response => {
        this.trackSituationList = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    // 事项类型 字典item_type字典翻译
    itemTypeFormat(row) {
      return this.selectDictLabel(this.itemTypeOptions, row.itemType)
    },
    // 跟踪方式 字典track_mode字典翻译
    trackModeFormat(row) {
      return this.selectDictLabel(this.trackModeOptions, row.trackMode)
    },
    findHandle(row) {
      this.queryParams.dealId = row.dealId
      this.queryParams.userId = row.remindPeople
      this.getList()
    },
    /** 修改按钮操作 */
    updateHandle(row) {
      this.formOpen = true
      this.$nextTick(() => {
        // 调用form页面的 init 方法初始化数据
        this.$refs.dealTrackForm.init(row)
      })
    },
    /** 删除按钮操作 */
    deleteHandle(row) {
      this.$confirm(this.$t('是否确认删除?'), this.$t('警告'), {
        confirmButtonText: this.$t('确定'),
        cancelButtonText: this.$t('取消'),
        type: 'warning'
      }).then(function() {
        return delDealTrack(row.id)
      }).then(() => {
        this.getList()
        this.msgSuccess(this.$t('删除成功'))
        this.$parent.$parent.getList()
      }).catch(function() {
      })
    },
    // 表单重置
    reset() {
      this.form = {}
      this.resetForm('form')
    },
    preview(fileId) {
      this.$refs.OnlinePreview.onlinePreviewFile(fileId, 'view')
    }
  }
}
</script>
<style lang="scss" scoped>
.otherFile{
  color: rgba(0, 0, 0, 0.8);
  font-size: 13px;
  display: flex;
  span{
    color: rgba(0, 0, 0, 0.65);
    white-space: nowrap;
  }
  .file{
    margin-left: 10px;
    p{
      margin:0px;
      line-height: 20px;
      margin-bottom: 5px;
      &:last-child{
        margin: 0;
      }
    }
  }

}
.click_file{
  color:#409EFF;
  cursor: pointer;
  display: block !important;
}
.dealTrack{
  // box-shadow: 0 2px 12px 0 #eee;
  border-radius: 10px;
  margin: 10px 0;
  padding: 25px 25px 25px 150px;
  p{
    margin: 0;
  }
  ul{
    li{
      position: relative;
      border-left: 1px solid #E1E2E8;
      padding-left: 30px;
      padding-bottom: 20px;
      .time{
        position: absolute;
        left: -100px;
        font-size: 14px;
        top: calc(50% - 12px);
      }
      .top{
        display: flex;
        align-items: center;
        column-gap: 10px;
        margin-bottom: 10px;
        .nickName{
          font-weight: bold;
          font-size: 14px;
        }
        .track{
          background: #9288D0;
          color: #fff;
          font-size: 13px;
          border-radius: 10px;
          padding: 3px 6px;
        }
        .type{
          background: #59D6CD;
          color: #fff;
          font-size: 13px;
          border-radius: 10px;
          padding: 3px 6px;
        }
      }
      .otherPeople{
        color: rgba(0, 0, 0, 0.8);
        font-size: 13px;
        display: flex;
        span{
          color: rgba(0, 0, 0, 0.65);
          white-space: nowrap;
        }
        p{
          margin-left: 5px;
          line-height: 16px;
          overflow-wrap: anywhere;
        }
      }
      .details{
        color: #F4A9A2;
      }
      .main{
        background-color: #F4F7F6;
        border-radius: 10px;
        padding: 15px;
        flex: 1;
        position: relative;
        &::before{
          position: absolute;
          content: '';
          width:0;
          height:0;
          border-top:10px solid transparent;
          border-bottom:10px solid transparent;
          border-right:10px solid #F4F7F6;
          left: -10px;
          top: calc(50% - 5px);
        }
        div{
          margin-bottom: 10px;
          line-height: 16px;
          &:last-child{
            margin-bottom: 0;
          }
        }
      }
      .content{
        display: flex;
        align-items: center;
        .btn{
          width: 70px;
          text-align: center;
        }
      }
      &::before{
        position: absolute;
        content: '';
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #fff;
        border: 1px solid #E1E2E8;
        left: -6px;
        top: calc(50% - 10px);
      }
    }
  }
}
</style>
